<script setup lang="ts">
import { Refresh } from "@element-plus/icons-vue";
import {
    useStatisticActualReport,
    useStatisticActualReportExport,
    useStatisticSubmitAndOwner,
    useStatisticSubmitAndOwnerExport,
} from "@fl/api/elevator-api";
import { SubmitBtn } from "@fl/components";
import { Echart } from "@fl/origin-components/Echart";
import { cloneDeep } from "lodash-es";
import type { VxeGridProps } from "vxe-table";
const gridOptions1 = reactive<VxeGridProps>({
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: "areaName", title: "区（街道）" },
        {
            field: "applyCommunitiesCount",
            title: "完成业主意见征询涉及社区数量(个)",
            sortable: true,
        },
        {
            field: "applyInstallationCount",
            title: "完成业主意见征询电梯数量(台)",
            sortable: true,
        },
        {
            field: "communitiesCount",
            title: "具备加梯条件涉及社区总数(个)",
            sortable: true,
        },
        {
            field: "communitiesRate",
            title: "完成业主意见征询涉及社区覆盖率",
            sortable: true,
        },
    ],
    data: [],
    footerData: [],
    showFooter: true,
    showOverflow: true,
});
const submitAndOwnerCharts = ref({
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow", // 阴影指示器
        },
    },
    legend: {
        data: [{ name: "上报量" }, { name: "完成业主意见征询" }, { name: "完成率" }],
    },
    grid: {
        left: "3%",
        right: "4%",
        submitAndOwner: "3%",
        containLabel: true,
    },
    yAxis: {
        type: "category",
        data: [], // 各区（街道）名称
        axisLabel: {
            // rotate: 45, // 旋转角度，可以根据实际情况调整
        },
    },
    xAxis: [
        {
            id: "x1",
            type: "value",
            position: "top",
            axisLabel: {
                formatter: "{value}%",
            },
        },
        {
            id: "x2",
            type: "value",
            position: "submitAndOwner",
        },
    ],
    series: [
        {
            name: "上报量",
            xAxisIndex: 1,
            xAxisId: "x2", // 使用下 x 轴
            type: "bar",
            data: [], // 各区（街道）上报量数据
            barWidth: "20%", // 柱状图宽度，可以调整
            itemStyle: {
                color: "#5470c6", // 设置柱状图颜色
            },
        },
        {
            name: "完成业主意见征询",
            xAxisIndex: 1,
            xAxisId: "x2", // 使用下 x 轴
            type: "bar",
            data: [], // 各区（街道）完成业主意见征询数据
            barWidth: "20%", // 柱状图宽度，可以调整
            itemStyle: {
                color: "#91cc75", // 设置柱状图颜色
            },
        },
        {
            name: "完成率",
            xAxisId: "x1", // 使用下 x 轴
            type: "bar",
            data: [], // 各区（街道）完成业主意见征询数据
            barWidth: "20%", // 柱状图宽度，可以调整
            xAxisIndex: 0,
            itemStyle: {
                color: "#fac858", // 设置柱状图颜色
            },
            tooltip: {
                valueFormatter: function (value) {
                    return value + "%";
                },
            },
        },
    ],
});
const {
    data: actualData,
    isLoading: actualLoading,
    refetch: actualReportRefetch,
} = useStatisticActualReport(); //各区（街道）完成业主意见征询情况
const {
    data: submitAndOwnerChartsData,
    isLoading: submitAndOwnerChartsLoading,
} = useStatisticSubmitAndOwner();

const {
    isPending: exportActualReportPending,
    mutateAsync: exportActualReportMutate,
} = useStatisticActualReportExport();

const {
    isPending: exportSubmitAndOwnerPending,
    mutateAsync: exportSubmitAndOwnerMutate,
} = useStatisticSubmitAndOwnerExport();

async function exportActualReport() {
    const res = await exportActualReportMutate();
    if (res) {
        const objectUrl = URL.createObjectURL(res);
        location.href = objectUrl;
        URL.revokeObjectURL(objectUrl);
    }
}
async function exportSubmitAndOwner() {
    const res = await exportSubmitAndOwnerMutate();
    if (res) {
        const objectUrl = URL.createObjectURL(res);
        location.href = objectUrl;
        URL.revokeObjectURL(objectUrl);
    }
}
watchEffect(() => {
    if (actualData.value) {
        gridOptions1.data = cloneDeep(actualData.value.slice(0, -1));
        gridOptions1.footerData = cloneDeep(actualData.value.slice(-1));
    }
    if (submitAndOwnerChartsData.value) {
        submitAndOwnerCharts.value.yAxis.data = submitAndOwnerChartsData.value.map(
            (item) => {
                return item.areaName;
            }
        );
        submitAndOwnerCharts.value.series[0].data = submitAndOwnerChartsData.value.map(
            (i) => {
                return i.submitCount;
            }
        );

        submitAndOwnerCharts.value.series[1].data = submitAndOwnerChartsData.value.map(
            (i) => {
                return i.ownerCount;
            }
        );
        submitAndOwnerCharts.value.series[2].data = submitAndOwnerChartsData.value.map(
            (i) => {
                const percentage =
                    isFinite(i.submitCount) && i.submitCount !== 0
                        ? ((i.ownerCount / i.submitCount) * 100).toFixed(2)
                        : 0;
                return percentage;
            }
        );
    }
});
</script>

<template>
    <ElRow :gutter="16" justify="space-between" class="mb20">
        <ElCol :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
            <ElCard shadow="hover" style="height: 970px !important">
                <div class="font-550 mb20 text-18 flex items-center justify-between">
                    <div>各区（街道）完成业主意见征询情况</div>
                    <div class="flex items-center">
                        <div
                            class="color-[#235FC4] flex items-center font-400 mr20 cursor-pointer"
                        >
                            <el-button :icon="Refresh" @click="actualReportRefetch"
                                >刷新</el-button
                            >
                        </div>
                        <SubmitBtn
                            @click="exportActualReport"
                            :isLoading="exportActualReportPending"
                            type="primary"
                            >导出</SubmitBtn
                        >
                    </div>
                </div>
                <vxe-grid
                    ref="xGrid"
                    v-bind="gridOptions1"
                    align="center"
                    class="mb12"
                    :loading="actualLoading"
                >
                </vxe-grid>
            </ElCard>
        </ElCol>
        <ElCol :xl="12" :lg="12" :md="12" :sm="12" :xs="12">
            <ElCard shadow="hover" style="height: 970px !important">
                <div class="font-550 mb20 text-18 flex items-center justify-between">
                    <div>上报量与完成业主意见征询数据对比</div>

                    <div class="flex items-center">
                        <SubmitBtn
                            @click="exportSubmitAndOwner"
                            :isLoading="exportSubmitAndOwnerPending"
                            type="primary"
                            >导出</SubmitBtn
                        >
                    </div>
                </div>
                <ElSkeleton :loading="submitAndOwnerChartsLoading" animated>
                    <Echart
                        id="submitAndOwnerCharts"
                        :options="submitAndOwnerCharts"
                        :height="900"
                    />
                </ElSkeleton>
            </ElCard>
        </ElCol>
    </ElRow>
</template>
